<template>
	<view class="index home">
		<view class="home-products">
			<view
				v-for="product in products"
				:key="product.id"
				class="home-products-cell"
				@click="onClick(product)"
			>
				<image
					class="home-products-cell-pic"
					:src="product.pic"
					mode="widthFix"
				></image>
				<view class="home-products-cell-title">
					{{ product.title }}
				</view>
				<view class="home-products-cell-price">{{ product.price }}元/每年</view>
			</view>
		</view>
		<m-doc custom-style="margin-top: 32px" is-home></m-doc>
	</view>
</template>

<script>
import { toast } from '../../utils/native'
import { getProductList } from '../../api/product/index.js'

export default {
	data() {
		return {
			products: []
		}
	},

	methods: {
		onClick(data) {
			uni.setStorageSync('productDetail', data)
			uni.setStorageSync('products', this.products)
			uni.navigateTo({
				url: '/pages/index/buy/buy'
			})
		}
	},

	onLoad() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
		// #endif
	},

	onShow() {
		if (!this.products.length) {
			getProductList(1).then((data) => {
				console.log(data)
				this.products = data.products
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.home {
	&-products {
		display: flex;

		&-cell {
			flex: 1;

			&-pic {
				width: 100%;
				height: 30px;
			}

			&-title {
				font-size: 14px;
				font-weight: 500;
			}

			&-price {
				color: coral;
			}
		}

		&-cell + &-cell {
			margin-left: 16px;
		}
	}
}
</style>
